Add dynamic images

Part 7Add dynamic images

Introduction

In section 3 you learned about using the StaticImage component from gatsby-plugin-image plugin. In this section, you are going to learn to use the GatsbyImage component which allows you to load dynamic images into your components while optimizing with specific options and formats

What You Will Learn

By the end of this section, you will be able to:

  • Change size and Layout of images using gatsbyImageData resolver arguments
  • Lazy load images to components

Background

What are dynamic images

You can think of dynamic images as images that come from a data source (such as a CMS) or in this case your MDX files. You can load them via GraphQL and display them using the GatsbyImage component.

Using GatsbyImage and getImage()

  1. Add image query to your original query. Note that any GraphQL File object that includes an image will have a childImageSharp field that you can use to query the image data.

  2. Configure gatsbyImageData with arguments: There are a couple of arguments accepted by the gatsbyImageData resolver like, format, placeholder. There are also advanced image processing options available In Graphiql you can select these options

image parameter query

You will have the query below.

query($slug: String) {
mdx(slug: { eq: $slug }) {
frontmatter {
date(formatString: "MM DD YYYY")
title
hero_image {
childImageSharp {
gatsbyImageData(
formats: [JPG, WEBP, AVIF]
placeholder: TRACED_SVG
avifOptions: { speed: 10 }
)
}
}
}
slug
body
}
}
  1. Display the image

To display the image on the screen you will want to import { GatsbyImage, getImage } from "gatsby-plugin-image". The getImage() function is an optional helper to make your code easier to read. We use

const BlogPosts = ({ data }) => {
const image = getImage(data.mdx.frontmatter.hero_image);
return (
<Layout>
<GatsbyImage image={image} aria-hidden={true} />
<MDXRenderer>{data.mdx.body}</MDXRenderer>
</Layout>
);
};

Exercise #1: Add a dynamic hero image to each blog post

Goal

Use the dynamic <GatsbyImage> component from gatsby-plugin-image to add a hero image to each blog post.

Note: You will also need to add and configure the gatsby-transformer-sharp plugin. This plugin adds a new childImageSharp field that you can use in your GraphQL queries.

Hints
  1. Download a hero image for each blog post, and put them in your /blog folder.
  2. Create a new field in the front matter for each .mdx file with the relative path to the hero image.
  3. Use the <GatsbyImage> component and getImage() function to render the hero image in your blog post template.
Solution

You'll learn more if you work through the exercise on your own.

But if you get stuck, here's one possible solution.

Summary

The key takeaways from this section are:

  • GatsbyImage resolver gives a parameter that allows you to pick formats for your dynamic image, also the placehoder effects can be: Blurry, dominant color or TRACED_SVG
  • The getImage() function is an optional helper to make your code easier to read.

Share Your Feedback!

You can help us improve this workshop by using this feedback form to tell us what you liked or didn't like about this part of the workshop.

← previousPart 6
← Go Home
Tutorial Lessons
Gatsby G Logo